import { defineStore } from 'pinia'
import { ref, computed } from 'vue'

export interface AppState {
  theme: 'light' | 'dark'
  language: 'zh-CN' | 'en-US'
  sidebarCollapsed: boolean
  loading: boolean
  deviceType: 'desktop' | 'tablet' | 'mobile'
  breadcrumbs: BreadcrumbItem[]
}

export interface BreadcrumbItem {
  title: string
  path?: string
  icon?: string
}

export const useAppStore = defineStore('app', () => {
  // 状态
  const theme = ref<'light' | 'dark'>('light')
  const language = ref<'zh-CN' | 'en-US'>('zh-CN')
  const sidebarCollapsed = ref(false)
  const loading = ref(false)
  const deviceType = ref<'desktop' | 'tablet' | 'mobile'>('desktop')
  const breadcrumbs = ref<BreadcrumbItem[]>([])
  
  // 计算属性
  const isDark = computed(() => theme.value === 'dark')
  const isMobile = computed(() => deviceType.value === 'mobile')
  const isTablet = computed(() => deviceType.value === 'tablet')
  const isDesktop = computed(() => deviceType.value === 'desktop')
  
  // 方法
  const setTheme = (newTheme: 'light' | 'dark') => {
    theme.value = newTheme
    localStorage.setItem('app-theme', newTheme)
    
    // 更新HTML类名
    if (newTheme === 'dark') {
      document.documentElement.classList.add('dark')
    } else {
      document.documentElement.classList.remove('dark')
    }
  }
  
  const toggleTheme = () => {
    setTheme(theme.value === 'light' ? 'dark' : 'light')
  }
  
  const setLanguage = (newLanguage: 'zh-CN' | 'en-US') => {
    language.value = newLanguage
    localStorage.setItem('app-language', newLanguage)
  }
  
  const toggleSidebar = () => {
    sidebarCollapsed.value = !sidebarCollapsed.value
  }
  
  const setSidebarCollapsed = (collapsed: boolean) => {
    sidebarCollapsed.value = collapsed
  }
  
  const setLoading = (isLoading: boolean) => {
    loading.value = isLoading
  }
  
  const setDeviceType = (type: 'desktop' | 'tablet' | 'mobile') => {
    deviceType.value = type
  }
  
  const setBreadcrumbs = (items: BreadcrumbItem[]) => {
    breadcrumbs.value = items
  }
  
  const addBreadcrumb = (item: BreadcrumbItem) => {
    breadcrumbs.value.push(item)
  }
  
  const clearBreadcrumbs = () => {
    breadcrumbs.value = []
  }
  
  // 初始化应用设置
  const initializeApp = () => {
    // 从localStorage恢复设置
    const savedTheme = localStorage.getItem('app-theme') as 'light' | 'dark' | null
    if (savedTheme) {
      setTheme(savedTheme)
    }
    
    const savedLanguage = localStorage.getItem('app-language') as 'zh-CN' | 'en-US' | null
    if (savedLanguage) {
      setLanguage(savedLanguage)
    }
    
    // 检测设备类型
    const checkDeviceType = () => {
      const width = window.innerWidth
      if (width < 768) {
        setDeviceType('mobile')
      } else if (width < 1024) {
        setDeviceType('tablet')
      } else {
        setDeviceType('desktop')
      }
    }
    
    checkDeviceType()
    window.addEventListener('resize', checkDeviceType)
    
    return () => {
      window.removeEventListener('resize', checkDeviceType)
    }
  }
  
  // 重置应用状态
  const resetApp = () => {
    theme.value = 'light'
    language.value = 'zh-CN'
    sidebarCollapsed.value = false
    loading.value = false
    breadcrumbs.value = []
    
    // 清除localStorage
    localStorage.removeItem('app-theme')
    localStorage.removeItem('app-language')
  }
  
  return {
    // 状态
    theme,
    language,
    sidebarCollapsed,
    loading,
    deviceType,
    breadcrumbs,
    
    // 计算属性
    isDark,
    isMobile,
    isTablet,
    isDesktop,
    
    // 方法
    setTheme,
    toggleTheme,
    setLanguage,
    toggleSidebar,
    setSidebarCollapsed,
    setLoading,
    setDeviceType,
    setBreadcrumbs,
    addBreadcrumb,
    clearBreadcrumbs,
    initializeApp,
    resetApp
  }
})